<template>
    <div>
        <div class="videoWrapper" v-for="item in videoList" :key="item.id">
            <video :src="`http://xy.163wy.xyz${item.src}`" controls width="100%"></video>
            <!-- 点赞数量等数据 -->
            <div class="about">
                <van-icon class="like-icon" :name="item.likeIcon ? 'like' : 'like-o'" @click="likeEvt(item.id)">{{item.likes}}</van-icon>
                <van-icon class="comment-icon" name="comment-o" @click="popupShow">{{item.comments}}</van-icon>
                <van-cell title="分享" @click="showShare = true" />
                <van-share-sheet
                    v-model = "showShare"
                    title = "立即分享给好友"
                    :options="options"
                    @select="onSelect"/>
            </div>
        </div>
        <!-- 点击评论弹出层 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
            <p>陈许强: 6666</p>
            <p>蔡怀金: 楼上是sb</p>
            <p>陈许强: 楼上是sb</p>
        </van-popup>
        
    </div>
</template>

<script>
    import { videoApi } from '../../apis/videoApi'
    export default {
        data(){
            return {
                videoList:[], //视频数据列表
                show:false, //弹框展示
                likeIcon:false, //点击喜欢图标改变
                isLike:false, //是否已经是喜欢
                sharePopup:false, //分享弹出框
                showShare: false,
                options: [
                    { name: '微信', icon: 'wechat' },
                    { name: '微博', icon: 'weibo' },
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                ],
            }
        },
        watch:{
            
        },
        async created(){
            let result = await videoApi()
            if(result.code !== 200){
                return
            }
            this.videoList = result.data
            this.videoList = this.videoList.map(it => {
                return {
                    ...it,
                    likeIcon:false
                }
            })
        },
        methods:{
            // 点击评论弹出弹出框
            popupShow(){
                this.show = true
                
            },
            //点击喜欢按钮
            likeEvt(id){
                    this.videoList = this.videoList.map(it => {
                        if(it.id == id){
                            if(!it.likeIcon){
                                it.likes++
                                it.likeIcon = true
                            }else{
                                it.likes--
                                it.likeIcon = false
                            }
                        }
                        return it
                    })
            },
            //分享
            onSelect(option) {
                Toast(option.name);
                this.showShare = false;
            },
        }
    }
</script>

<style lang="less" scoped>
    .videoWrapper{
        height: 230px;
        width: 90%;
        background: rgb(44, 35, 35);
        border-radius: 10px;
        margin: 10px auto;
        video{
            border-radius: 10px;
        }
        .about{
            color: #fff;
            display: flex;
            justify-content: space-around;
            .van-icon-like-o,.van-icon-comment-o,.van-icon-guide-o,
            .van-icon-like{
                line-height: 26px;
                &::before{
                    margin-right: 5px;
                    margin-top: 5px;
                    font-size: 26px;
                }
            }
            .van-icon-like{
                &::before{
                    color: #f40;
                }
            }
        }
    }
    .van-cell{
        width: 40px;
        font-size: .8rem;
        margin-top: 8px;
        height: 30px;
        padding: 0;
        color: #fff;
        background:rgb(44, 35, 35) ;
    }
</style>